<template>
    <button
        class="tyus-button"
        :class="
            (type ? ' tyus-button-' + type : '') +
            (props.color ? ' tyus-button-' + props.color : ' tyus-button-default') +
            (props.shape ? ' tyus-button-' + props.shape : '') +
            (props.size ? ' tyus-button-' + props.size : '') +
            (props.icon ? ' tyus-button-icon' : '') +
            (props.disabled ? ' tyus-button-disabled' : '')
        "
        @click="buttonClick">
        <span class="tyus-button-icon" :class="props.loading ? ' tyus-button-loading' : ''" v-if="props.loading">
            <i class="tyus-icon tyus-icon-arrow-down-line"></i>
        </span>
        <span class="tyus-button-icon" v-if="props.iconPosition === 'start'">
            <i class="tyus-icon" :class="props.icon"></i>
        </span>
        <span>
            <slot></slot>
        </span>
        <span class="tyus-button-icon" v-if="props.iconPosition === 'end'">
            <i class="tyus-icon" :class="props.icon"></i>
        </span>
    </button>
</template>

<script setup lang="ts">
import { defineProps, onBeforeMount, computed, defineEmits } from 'vue';
// 外部参数
const props = defineProps({
    // 按钮类型 {String} '':默认按钮 | solid:实心按钮 | outlined:实线边框 |dashed:虚线按钮 | text:文本按钮 | link:链接按钮
    type: { type: String, default: '' },
    // 按钮颜色 {String} '':默认颜色 | primary:主要颜色 | danger:危险颜色 |success:成功颜色 | warning:警告颜色 | info:信息颜色
    color: { type: String, default: '' },
    // 按钮类型 {String} round:圆角按钮(默认) | circle:圆形按钮
    shape: { type: String, default: 'round' },
    // 按钮大小 {String} large:大 | small:小
    size: { type: String, default: '' },
    // icon
    icon: { type: String, default: '' },
    // icon定位
    iconPosition: { type: String, default: 'start' },
    // 加载状态
    loading: { type: Boolean, default: false },
    // 禁用状态
    disabled: { type: Boolean, default: false },
});

const type = computed(() => {
    if (props.color === '' && props.type === '') {
        return 'outlined';
    } else if (props.color && props.type === '') {
        return 'solid';
    } else {
        return props.type;
    }
});

const emits = defineEmits(['click']);

onBeforeMount(() => {});

const buttonClick = () => {
    emits('click');
};
</script>

<style lang="scss" scope>
.tyus-button {
    // 文字颜色
    --button-default-color: var(--color-gray-13);
    --button-ghost-color: var(--color-gray-1);
    --button-solid-color: var(--color-gray-1);
    --button-disabled-color: var(--text-color-disabled);
    // 文字悬浮颜色
    --button-default-color-hover: var(--color-gray-9);
    --button-outlined-color-hover: var(--color-blue-5);
    --button-dashed-color-hover: var(--color-blue-5);
    --button-link-color-hover: var(--color-blue-5);
    // 背景颜色
    --button-default-bg: var(--color-gray-1);
    --button-solid-bg: var(--color-gray-13);
    --button-filled-bg: var(--color-gray-3);
    --button-text-bg: var(--color-gray-3);
    --button-disabled-bg: var(--color-disabled-bg);
    // 背景悬浮颜色
    --button-default-bg-hover: var(--color-gray-1);
    --button-filled-bg-hover: var(--color-gray-4);
    --button-text-bg-hover: var(--color-gray-3);
    // 边框颜色
    --button-default-border-color: var(--border-color-default);
    // 边框类型
    --button-default-border-style: var(--border-style-solid);
    --button-dashed-border-style: var(--border-style-dashed);
    // 边框大小
    --button-default-border-width: var(--border-width-default);
    // 圆角
    --button-default-border-radius: var(--border-radius-default);
    --button-circle-border-radius: var(--border-radius-circle);
    --button-large-border-radius: var(--border-radius-large);
    --button-small-border-radius: var(--border-radius-small);
    // 间距
    --button-default-padding-horizontal: var(--padding-horizontal-default);
    --button-circle-padding-horizontal: 0;
    --button-large-padding-horizontal: var(--padding-horizontal-large);
    --button-small-padding-horizontal: var(--padding-horizontal-small);
    --button-default-padding-vertical: var(--padding-vertical-default);
    --button-large-padding-vertical: var(--padding-vertical-large);
    --button-small-padding-vertical: var(--padding-vertical-small);
    // 高度
    --button-default-height: var(--height-default);
    --button-large-height: var(--height-large);
    --button-small-height: var(--height-small);
    // 文本大小
    --button-default-font-size: var(--font-size-default);
    --button-large-font-size: var(--font-size-large);
    --button-small-font-size: var(--font-size-small);
}

.tyus-button {
    @include flex.display-flex;
    @include flex.flex-center;
    height: var(--button-default-height);
    padding: var(--button-default-padding-vertical) var(--button-default-padding-horizontal);
    background-color: var(--button-default-bg);
    color: var(--button-default-color);
    border-radius: var(--button-default-border-radius);
    border: var(--button-default-border-width) var(--button-default-border-style) transparent;
    font-size: var(--button-default-font-size);
    outline: none;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;

    &.tyus-button-icon {
        font-size: inherit;
        gap: 8px;
    }

    $size: (
            'large',
            var(--button-large-height),
            var(--button-large-font-size),
            var(--button-large-padding-horizontal),
            var(--button-large-padding-vertical),
            var(--button-large-border-radius)
        ),
        (
            'small',
            var(--button-small-height),
            var(--button-small-font-size),
            var(--button-small-padding-horizontal),
            var(--button-small-padding-vertical),
            var(--button-small-border-radius)
        );
    @each $name, $height, $font-size, $padding-horizontal, $padding-vertical, $border-radius in $size {
        &.tyus-button-#{$name} {
            height: $height;
            font-size: $font-size;
            padding: $padding-vertical $padding-horizontal;
            border-radius: $border-radius;
        }
    }

    $shape: ('round', none, none, var(--button-default-border-radius)),
        ('circle', var(--height-default), var(--button-circle-padding-horizontal), var(--button-circle-border-radius));
    @each $name, $min-width, $padding-horizontal, $border-radius in $shape {
        &.tyus-button-#{$name} {
            @if ($name == 'circle') {
                min-width: $min-width;
                padding-left: $padding-horizontal;
                padding-right: $padding-horizontal;
                border-radius: $border-radius;
            }
        }
    }
    $color: (
            'default',
            var(--button-default-bg),
            var(--button-default-color),
            var(--button-default-border-color),
            var(--button-default-bg-hover),
            var(--button-default-color-hover)
        ),
        (
            'primary',
            var(--color-primary-bg),
            var(--color-primary),
            var(--color-primary),
            var(--color-primary-bg-hover),
            var(--color-primary-hover)
        ),
        (
            'danger',
            var(--color-danger-bg),
            var(--color-danger),
            var(--color-danger),
            var(--color-danger-bg-hover),
            var(--color-danger-hover)
        ),
        (
            'success',
            var(--color-success-bg),
            var(--color-success),
            var(--color-success),
            var(--color-success-bg-hover),
            var(--color-success-hover)
        ),
        (
            'warning',
            var(--color-warning-bg),
            var(--color-warning),
            var(--color-warning),
            var(--color-warning-bg-hover),
            var(--color-warning-hover)
        ),
        (
            'info',
            var(--color-info-bg),
            var(--color-info),
            var(--color-info),
            var(--color-info-bg-hover),
            var(--color-info-hover)
        );
    @each $name, $bg, $color, $border-color, $bg-hover, $color-hover in $color {
        &.tyus-button-#{$name} {
            $type: ('solid', $color, var(--button-solid-color), none, none, $color-hover, none, none),
                ('outlined', var(--button-default-bg), $color, $border-color, none, none, $color-hover, $color-hover),
                (
                    'dashed',
                    var(--button-default-bg),
                    $color,
                    $border-color,
                    var(--button-dashed-border-style),
                    none,
                    $color-hover,
                    $color-hover
                ),
                ('filled', $bg, $color, none, $bg-hover, $bg-hover, $color-hover, none),
                ('text', var(--button-default-bg), $color, none, none, $bg, $color-hover, none),
                ('link', var(--button-default-bg), $color, none, none, none, $color-hover, none);
            @each $type-name, $type-bg, $type-color, $type-border-color, $type-border-style, $type-bg-hover,
                $type-color-hover, $type-border-color-hover in $type
            {
                &.tyus-button-#{$type-name} {
                    @if ($type-bg != var(--button-default-bg)) {
                        background-color: $type-bg;
                    } @else {
                        @if ($type-name == 'filled') {
                            background-color: var(--button-filled-bg);
                        }
                    }
                    @if ($type-color != var(--button-default-color)) {
                        color: $type-color;
                    }
                    @if ($type-border-color != none) {
                        border-color: $border-color;
                    }
                    @if ($type-border-style != none) {
                        border-style: $type-border-style;
                    }

                    &:hover,
                    &.hover {
                        @if ($name == 'default') {
                            @if ($type-name == 'solid') {
                                background-color: $type-bg-hover;
                            } @else if ($type-name == 'outlined') {
                                color: var(--button-outlined-color-hover);
                                border-color: var(--button-dashed-color-hover);
                            } @else if ($type-name == 'dashed') {
                                color: var(--button-dashed-color-hover);
                                border-color: var(--button-dashed-color-hover);
                            } @else if ($type-name == 'filled') {
                                background-color: var(--button-filled-bg-hover);
                            } @else if ($type-name == 'text') {
                                background-color: var(--button-text-bg-hover);
                            } @else {
                                color: var(--button-link-color-hover);
                            }
                        } @else {
                            @if ($type-bg-hover != none) {
                                background-color: $type-bg-hover;
                            }
                            @if ($type-color-hover != none) {
                                color: $type-color-hover;
                            }
                            @if ($type-border-color-hover != none) {
                                border-color: $type-border-color-hover;
                            }
                        }
                    }
                }
            }
        }
    }

    // loading状态
    .tyus-button-loading {
        animation: rotateAnimation 2s linear 0s infinite;

        /* 定义关键帧 */
        @keyframes rotateAnimation {
            from {
                transform: rotate(0deg); /* 起始状态：旋转0度 */
            }
            to {
                transform: rotate(360deg); /* 结束状态：旋转360度 */
            }
        }
    }

    // 禁用状态
    &.tyus-button-disabled {
        color: var(--button-disabled-color);
        background-color: var(--button-disabled-bg);
        cursor: not-allowed;

        &:hover,
        &.hover {
            color: var(--button-disabled-color) !important;
            background-color: var(--button-disabled-bg) !important;
            border-color: var(--button-default-border-color) !important;
        }
    }
}
</style>
